<template>
	<view class="page-wrapper">
		<view class="search-words">
			<view class="words row wrap">
				<view v-for="(item, index) in list" :key="index" :class="{'selected-item':current===index}"
					class="item br60  lighter sm line1" @click="change(index)">{{item.name}}</view>
			</view>
		</view>
		<mescroll-body height='200rpx' @init="mescrollInit" ref="mescrollRef" :down="downOption" :up="upOption"
			@up="upCallback">
			<view>
				<view v-for="merchant in merchantList">
					<view class="merchant-main">
						<view>
							<image class="merchant-img" :src="merchant.logo" mode="widthFix"></image>
						</view>
						<view class="center">
							<view class="title">
								{{ merchant.name  }}
							</view>
							<view class="num">
								{{ getAuthNum(merchant) }}家厂家认证授权
							</view>
						</view>
						<view class="right">
							<u-button shape="circle" :custom-style="customStyle" size="mini"
								@click="onView(merchant.id)">查看</u-button>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getMerchant
	} from "@/api/merchant";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import PageExposure from "@/mixins/page_exposure.js"

	export default {
		mixins: [MescrollMixin, PageExposure], // 使用mixin
		data() {
			return {
				current: 0,
				customStyle: {
					color: '#FF5E61'
				},
				list: [{
						name: '全部',
						param: undefined
					},
					{
						name: '北京市',
						param: '北京'
					},
					{
						name: '上海市',
						param: '上海'
					},
					{
						name: '广州市',
						param: '广州'
					},
					{
						name: '深圳市',
						param: '深圳'
					},
					{
						name: '杭州市',
						param: '杭州'
					},
					{
						name: '郑州市',
						param: '郑州'
					},
					{
						name: '成都市',
						param: '成都'
					},
					{
						name: '武汉市',
						param: '武汉'
					},
					{
						name: '重庆市',
						param: '重庆'
					},
					{
						name: '南京市',
						param: '南京'
					},
					{
						name: '厦门市',
						param: '厦门'
					},
					{
						name: '福州市',
						param: '福州'
					}
				],
				merchantList: [],
				downOption: {
					use: false, // 不启用mescroll下拉刷新，使用页面原生下拉刷新
				},
				upOption: {
					isBounce: false,
					noMoreSize: 8, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					toTop: {
						right: "20rpx",
						bottom: "140rpx",
						safearea: true,
						width: "80rpx",
						radius: "50%",
					},
				},
			};
		},
		methods: {
			onView(id) {
				// 商家详情页
				this.goto(`/social/pages/merchant-detail/merchant-detail?id=${id}`)
			},
			async getMerchantData(params) {
				const {
					num,
					size
				} = params
				const city = this.list[this.current]
				return getMerchant({
					page: num,
					pagesize: size,
					city: city.param,
				});
			},
			change(index) {
				this.current = index
				this.mescroll.resetUpScroll()
			},
			async upCallback(page) {
				try {
					// 请求数据列表
					let list = await this.getMerchantData(page);
					// 设置列表数据
					if (page.num === 1) this.merchantList = []; // 如果是第一页需手动制空列表
					this.merchantList = [...this.merchantList, ...list]; // 追加新数据
					// 联网成功的回调,隐藏下拉刷新和上拉加载的状态
					this.mescroll.endSuccess(list.length);
				} catch (err) {
					console.log(err);
				}
			},
			goto(url) {
				uni.navigateTo({
					url,
				});
			},
			getAuthNum(data) {
				const {
					auth_info
				} = data || {}
				if (!auth_info) {
					return 0
				}
				try {
					const _auth_info = JSON.parse(auth_info)
					return _auth_info.length
				} catch (e) {
					return 0
				}
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color:
			#fff;
	}

	.page-wrapper {
		background-color: #fff;
		padding-top: 38rpx;
	}

	.search-words {
		padding-left: 40rpx;
		padding-bottom: 24rpx;

		.title {
			padding: 32rpx 14rpx;
		}

		.words {
			.item {
				line-height: 52rpx;
				height: 52rpx;
				padding: 0 24rpx;
				background-color: #F5F5F5;
				margin-right: 16rpx;
				margin-bottom: 12rpx;
			}

			.selected-item {
				background-color: red;
				color: #fff;
			}
		}
	}

	.merchant-main {
		padding: 22rpx 0;
		margin: 0 42rpx;
		border-bottom: 1px #eee solid;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;

		.merchant-img {
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			margin-right: 18rpx;
		}

		.center {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			flex: 1;
		}


		.title {
			overflow: hidden;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box; // 弹性伸缩盒
			-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
			-webkit-line-clamp: 1;
			flex: 1;
			font-family: PingFang SC;
			color: #000000;
			font-weight: 700;
			font-size: 32rpx;
			line-height: 44rpx;
			font-style: normal;
			text-decoration: none;
			text-align: left;
		}

		.num {
			padding: 0 15rpx;
			border-radius: 24rpx;
			height: 30rpx;
			margin-top: 16rpx;
			line-height: 30rpx;
			border-radius: 30rpx;
			background-color: #563D3E;
			font-family: PingFang SC;
			color: #EDD7C2;
			font-weight: 500;
			font-size: 18rpx;
		}

		.right {
			margin-left: 24rpx;
		}
	}
</style>